<template>
  <el-row class="tac">
      <el-col :span="24">
          <el-menu default-active="2" @open="handleOpen" @close="handleClose" style="border-radius:20px;">
              <div v-for="(item, i) in menus" style="border-radius:5px;">
                  <!-- 有下拉菜单 -->
                  <el-sub-menu :index="item.index" v-if="item?.childs">
                      <template #title>
                          <el-icon>
                              <!-- <location /> -->
                              <component :is="item.icon"></component>
                          </el-icon>
                          <span>{{ item.text }}</span>
                      </template>
                      <!-- 子菜单 -->
                      <el-menu-item-group v-for="opt in item.childs" :title="opt.title">
                          <el-menu-item 
                          v-if="opt?.arr" 
                          v-for="obj in opt.arr" 
                          :index="obj.index"
                          @click="addTabEvent(obj.name, obj.id, obj.path)"
                          >{{ obj.name}}</el-menu-item>
                      </el-menu-item-group>
                  </el-sub-menu>

                  <!-- 没有下拉菜单 -->
                  <el-menu-item :index="item.index" v-else  
                      @click="addTabEvent(item.name, item.id, item.path)"> 
                      <el-icon>
                          <component :is="item.icon"></component>
                      </el-icon>
                      <span>{{ item.text }}</span>
                  </el-menu-item>
              </div>
          </el-menu>
      </el-col>
  </el-row>
</template>


<script lang="ts" setup>
// import { ref } from 'vue'

// 伸缩导航栏
// import { ref } from 'vue'
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   // House,
//   Setting,
// } from '@element-plus/icons-vue'
// const isCollapse = ref(true)
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }

// 导入storeToRefs函数
import {storeToRefs} from 'pinia'
import { useRouter, useRoute } from 'vue-router'

// 导入 “tab” 数据存储模块
import { useTabStore } from '../stores/tabBar'
import { useMenuStore } from '../stores/menu'

// 获取“tab”存储对象
const tabStore = useTabStore()

// 获取“menu”储存对象
const menuStore = useMenuStore()

// 获取pinia储存中的“菜单”数组
let { menus } = storeToRefs(menuStore)

// 获取路由实例对象
const $router = useRouter();

// 点击 “侧栏菜单” 在右侧内容区域显示
const addTabEvent = (name:string,id:string,path:string) => {
    // 添加顶部栏的导航
    tabStore.add({name, id, path})
    console.log("URL:",path)
    // 路由跳转组件
    $router.push({path})
}


const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}


// 刷新页面也能看到这个topbar的导航文本
// console.log($router);
const $route = useRoute();
const path = $route.path;
let data = menus.value;
let opt: any = {}

for(let i = 0 ; i < data.length ; i ++){
    if(data[i].childs){
        // 继续循环
        let childs: any = data[i].childs;
        for(let j = 0 ; j < childs.length; j ++){
            if(childs[j].arr){
                let arr = childs[j].arr
                for(let k = 0 ; k< arr.length ; k ++){
                    if(arr[k].path == path) {
                            console.log("111")
                            opt.name = data[i].name;
                            opt.id = data[i].id;
                        break;
                    }
                }
            }
        }   
    }
    else {
        if(data[i].path == path) {
            opt.name = data[i].name;
            opt.id = data[i].id;
            break;
        }
    }
}
// 初始化
console.log("path:",path)
if(path != "/"){
  tabStore.add(opt)
}

</script>

<style lang="less" setup>
//   .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 200px;
//   min-height: 400px;
// }

</style>
